<script setup>
	import { computed, unref} from "vue";

	import {navBarH} from "@/utils/system.js";
	import {SYSTEM_Window_INFO} from "@/utils/config.js";
	const containerHeight = computed(() => {
		let tabBarH = 0;
		// #ifdef H5
		tabBarH = 50; // H5 底部安全区或原生 tabBar 高度
		// #endif

		const navH = unref(navBarH); // 自定义导航栏高度
		const searchH = uni.rpx2px(90); // 搜索框高度
		const shopBarH = uni.rpx2px(100); // ✅ 底部购物车栏高度（你的 .shop-bar 高度）
		
		// 总体：窗口高度 - 导航栏 - 搜索框 - 购物车 - 安全区
		const height = SYSTEM_Window_INFO.windowHeight - navH - searchH - shopBarH - tabBarH;
		return `${height}px`;
	});
</script>

<template>
	<view class="page-wrap">
		<mod-nav-bar title="商城" title-color="#fff"></mod-nav-bar>
		<mode-search></mode-search>
		<view class="container">
			<!-- 左侧分类 -->
			<scroll-view class="aside" scroll-y>
				<!-- 都加上active时 -->
				<view class="item" :class="{'active': index === 0}" v-for="(item,index) in 5" :key="index">
					分类名称
				</view>
			</scroll-view>
			<!-- 右侧商品列表 -->
			<scroll-view class="main" scroll-y>
				<view class="group" v-for="(group,index) in 9" :key="index">
					<view class="name">白酒</view>
					<view class="list">
						<view class="item" v-for="(goods,index) in 3" :key="index">
							<card-goods-info></card-goods-info>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 购物车 -->
		<view class="shop-bar">
			<view class="content">
				<view class="left">
					<!-- 左 功能图标 -->
					<view class="icon-wrap" >
						<view class="iconfont icon-caigou"></view>
						<view class="tag">33</view>
					</view>
					<view class="price-wrap">
						<text>合计：</text>
						<text class="num">￥888</text>
					</view>
				</view>
				<view class="right">
					<button class="settle" >去结算</button>
				</view>
			</view>
		</view>

	</view>
</template>

<style lang="scss" scoped>
.page-wrap {
	.container {
		display: flex;justify-content: space-between;padding-bottom: 120rpx;
		height: v-bind(containerHeight);border: 1px solid red;
		.aside {
			width: 200rpx;height: 100%;background: #f9f9f9;flex-shrink: 0;
			.item{
				display: flex;align-items: center;justify-content: center;
				width: 100%;height: 100rpx;font-size: 28rpx;color: #676;
				&.active {
					color: $uni-color-primary;background: #fff;
					&::after {
						content: "";display: block;position: absolute;left: 0;top: 50%;
						transform: translateY(-50%);width: 8rpx;height: 36rpx;background: $uni-color-primary;
						border-radius: 0 10rpx 10rpx 0;
					}
				}
			}
		.main {
			flex: 1;height: 100%;
			.group {
				.name {
				font-size: 26rpx;color: #333;
				padding: 10rpx 24rpx;position: sticky;
				top: 0;left: 0;background: #fff;
				font-weight: bold;
				}
				.list {padding: 24rpx;padding-top: 0;display: grid;gap: 24rpx;}
			}
		}

		
	}
	}
.shop-bar {
  position: fixed;width: 100%;left: 0;
  //#ifdef H5
  bottom: 50px;
  //#endif
  //#ifndef H5
  bottom: 0;
  //#endif
  .content {
    position: relative;display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100rpx;
	padding: 0 24rpx;box-sizing: border-box;background-color: #6a6a6a;
    .left {
      display: flex;align-items: center;height: 100%;
      .icon-wrap {
        display: flex;justify-content: center;align-items: center;width: 112rpx;height: 112rpx;border-radius: 50%;background-color: $uni-color-primary;
		position: absolute;top: -30rpx;left: 24rpx;
        .iconfont {font-size: 50rpx;color: #fff;}
        .tag {
          position: absolute;right: 0;top: 0rpx;min-width: 40rpx;height: 40rpx;padding: 10rpx;font-size: 22rpx;color: #fff;
		  display: flex;align-items: center;justify-content: center;background-color: $uni-color-error;border-radius: 40rpx;
        }
      }
      .price-wrap {
        display: flex;align-items: center;margin-left: 120rpx;color: #fff;font-size: 22rpx;
        .num {font-size: 36rpx;}
      }
    }
    .right {
      display: flex;justify-content: flex-end;align-items: center;height: 100%;
      .settle {padding: 0 32rpx;height: 66rpx;line-height: 66rpx;font-size: 32rpx;color: #fff;background-color: $uni-color-error;border-radius: 66rpx;}
    }
  }
}


}

</style>
